<template>
  <!-- 用户组 -->
  <div>
    <page-header-wrapper />
    <a-card style="margin-top: 10px" :loading="loading">
      <a-input-search placeholder="请输入用户组名称" v-model="searchForm.groupName" @search="search" style="width: 240px; margin-bottom: 10px" />
      <a-button @click="visible = true" style="float: right" type="primary">添加用户组</a-button>
      <a-table
        :columns="columns"
        :data-source="data"
        bordered
        :rowKey="record=>record.user_group_id"
        :pagination="pagination"
      >
        <template slot="operation" slot-scope="text, record">
          <a @click="showModal(record, 'visible')" style="float: left; margin-right: 10px;">编辑</a>
          <a @click="showModal(record, 'visibleDrawer')" style="float: left; margin-right: 10px;">授权管理</a>
          <div class="editable-row-operations">
            <a-popconfirm :title="$t('form.basic-form.confirm.delete')" @confirm="() => deleteGroup(record)">
              <a>删除</a>
            </a-popconfirm>
          </div>
        </template>
      </a-table>
    </a-card>
    <!--  编辑用户组基础信息  -->
    <a-modal v-model="visible" :footer="null" title="编辑框">
      <a-form
        :form="form"
        :loading="formLoading"
      >
        <a-form-item
          label="用户组名称"
        >
          <a-input
            v-decorator="[
              'user_group_name',
              {rules: [{ required: true, message: '用户组名称不能为空' }], validateTrigger: 'blur', initialValue: editForm.user_group_name}
            ]"
          />
        </a-form-item>
        <a-form-item label="用户组父级" v-if="false">
          <a-select
            show-search
            v-decorator="[
              'user_group_parent_id',
              {rules: [{ required: false, message: '用户组父级不能为空' }], validateTrigger: 'blur', initialValue: editForm.user_group_parent_id}
            ]"
            placeholder="请输入用户组名称"
            :default-active-first-option="false"
            :filter-option="false"
            :not-found-content="null"
            @search="getUserGroupListInfos"
            @change="handleChange"
          >
            <a-select-option v-for="item in userGroupItems" :key="item.user_group_id">
              {{ item.user_group_name }}
            </a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item style="margin-top:24px">
          <a-button
            size="large"
            type="primary"
            @click="handleSubmit"
          >{{ $t('submit') }}</a-button>
        </a-form-item>
      </a-form>
    </a-modal>
    <!-- 用户组权限编辑   -->
    <a-drawer
      :title="$t('form.basic-form.add.authorization')"
      :width="720"
      :visible="visibleDrawer"
      :body-style="{ paddingBottom: '80px' }"
      @close="onClose"
    >
      <user-role-drawer
        :parent="this"
        :change-info="editForm"
        @close="onClose"
        role-type="userGroupRoles"
      />
    </a-drawer>
  </div>
</template>

<script>
import { PageHeaderWrapper } from '@ant-design-vue/pro-layout'
import {
  getUserGroupList,
  updateUserGroup,
  addUserGroup,
  deleteUserGroup
} from '@/api/user'
import userRoleDrawer from './components/UserRoleDrawer'

const columns = [
  {
    title: 'user_group_name',
    dataIndex: 'user_group_name',
    width: '10%',
    scopedSlots: { customRender: 'user_group_name' }
  },
  {
    title: 'operation',
    dataIndex: 'operation',
    width: '15%',
    scopedSlots: { customRender: 'operation' }
  }
]

export default {
  name: 'UserGroup',
  components: {
    PageHeaderWrapper,
    userRoleDrawer
  },
  data () {
    return {
      searchForm: {
        page: 1,
        groupName: ''
      },
      columns,
      data: [],
      userGroupItems: [],
      loading: true,
      editForm: {
        user_group_id: 0,
        user_group_name: '',
        user_group_parent_id: 0
      },
      form: this.$form.createForm(this),
      formLoading: false,
      visible: false,
      visibleDrawer: false,
      pagination: {
        total: 0,
        onChange: (page) => {
          this.searchForm.page = page
          this.getUserGroupListInfo()
        }
      }
    }
  },
  mounted () {
    this.getUserGroupListInfo()
  },
  watch: {
    visible (value) {
      if (value) {
        this.editForm = {
          user_group_id: 0,
          user_group_name: '',
          user_group_parent_id: 0
        }
      }
    }
  },
  methods: {
    search () {
      this.searchForm.page = 1
      this.getUserGroupListInfo()
    },
    getUserGroupListInfo () {
      getUserGroupList(this.searchForm).then(res => {
        this.data = res.items
        this.pagination.total = res.count ? res.count : 0
        this.loading = false
      })
    },
    handleChange (value) {
      this.searchForm.user_group_id = value
      this.search()
    },
    // 变更用户类信息
    handleSubmit (e) {
      // code ...
      this.formLoading = true
      e.preventDefault()
      const {
        form: { validateFields }
      } = this
      validateFields(['user_group_id', 'user_group_name'], { force: true }, (err, values) => {
        if (!err) {
          this.editForm.user_group_name = values.user_group_name
          if (this.editForm.user_group_id > 0) {
            // 更新 ...
            updateUserGroup(this.editForm).then(res => {
              this.$message[res.code === 200 ? 'success' : 'warning'](res.msg)
              this.formLoading = this.visible = false
            })
          } else {
            // 添加 ...
            addUserGroup(this.editForm).then(res => {
              this.$message[res.code === 200 ? 'success' : 'warning'](res.msg)
              if (res.code === 200) {
                res.items.user_group_id = res.items.id
                this.data.unshift(res.items)
              }
              this.formLoading = this.visible = false
            })
          }
        }
      })
    },
    getUserGroupListInfos (value) {
      getUserGroupList({
        groupName: value
      }).then(res => {
        this.userGroupItems = res.items
        this.loading = false
      })
    },
    showModal (record, type) {
      if (type === 'visibleDrawer') {
        this[type] = true
        this.editForm = record
      } else {
        this[type] = true
        setTimeout(() => {
          this.editForm = record
        }, 20)
      }
    },
    deleteGroup (record) {
      deleteUserGroup(record).then(res => {
        this.$message[res.code === 200 ? 'success' : 'warning'](res.msg)
        this.getUserGroupListInfo()
      })
    },
    onClose () {
      this.visibleDrawer = false
    }
  }
}
</script>

<style scoped>
</style>
